import React, { Fragment, useState, useMemo } from "react";
import { Button, Modal } from "antd";
import { getVersionInfo, applySubscription } from "tiklab-core-ui";
import { CheckCircleTwoTone } from "@ant-design/icons";
import "./ExtensionCommon.scss";
// 图片资源，确保路径正确
import IpEEImg from "../../assets/img/ip-ee.png";
import CustomEEImg from "../../assets/img/customLogo-ee.png";
import PdfEEImg from "../../assets/img/pdf-ee.png";
import VersionEEImg from "../../assets/img/version-ee.png";
import StatisticsTrendEEPng from "../../assets/img/statistics-trend-ee.png"
import StatisticsStatusEEPng from "../../assets/img/statistics-status-ee.png"
import StatisticsContributionEEPng from "../../assets/img/statistics-contribution-ee.png";
import ReviewEEImg from "../../assets/img/review-ee.png";

/**
 * 以按钮形式展示触发器
 * @param {object} props
 * @param {string} props.name - 按钮文字
 * @param {function} props.showModal - 点击按钮时调用的函数，用于显示弹窗
 */
const ShowBtnView = ({ name, showModal }) => (
    <Button
        onClick={showModal}
        style={{
            display: "flex",
            alignItems: "center",
            gap: "5px"
        }}
    >
        <span>{name}</span>
        {/* 可以考虑在这里添加一个升级的小图标 */}
    </Button>
);

/**
 * 以文字链接形式展示触发器
 * @param {object} props
 * @param {string} props.name - 文字内容
 * @param {function} props.showModal - 点击文字时调用的函数，用于显示弹窗
 */
const ShowTxtView = ({ name, showModal }) => (
    <div
        onClick={showModal}
        style={{
            display: "flex",
            alignItems: "center",
            gap: "5px",
            cursor: "pointer"
        }}
    >
        <span>{name}</span>
        {/* 可以考虑在这里添加一个升级的小图标 */}
    </div>
);

// 扩展项的配置信息，用于弹窗中展示具体功能点
const EXTENSION_ITEMS = [
    { id: 'PDF', title: 'PDF导出', icon: PdfEEImg },
    { id: '/setting/logo', title: '自定义Logo', icon: CustomEEImg },
    { id: '/setting/whitelist', title: 'IP黑白名单', icon: IpEEImg },
    { id: "apiVersion",title: "接口版本管理", icon: VersionEEImg },
    { id: "/workspace/review", title: "接口评审", icon: ReviewEEImg },
    // 注意：ID 应该与 LeftMenuCommon 中传递的 id (即 item.router) 相匹配，以便正确显示
];

// 统计相关的扩展项配置
const STATISTICS_ITEM = [
    { id: 'trend', title: '接口趋势', icon: StatisticsTrendEEPng }, // 对应 /workspace/statistics/trend
    { id: 'status', title: '接口状态', icon: StatisticsStatusEEPng }, // 对应 /workspace/statistics/status 等
    { id: 'contribution', title: '成员贡献', icon: StatisticsContributionEEPng },
];


/**
 * 扩展功能通用组件
 * @param {string} props.id - 当前扩展功能的唯一标识 (通常是路由路径或特定ID)
 * @param {React.ReactNode} [props.extension] - 如果版本未过期，且定义了此prop，则直接渲染此内容 (在此场景下主要通过 ViewContent)
 * @param {string} [props.routerPath] - 如果版本未过期，且是特定路由项，则跳转到此路径
 * @param {object} [props.history] - react-router的history对象，用于跳转
 * @param {string} [props.name] - 功能名称，用于弹窗标题和默认触发器文本
 * @param {boolean} [props.isBtn=false] - 是否以按钮形式显示触发器 (如果未提供 ViewContent)
 * @param {function} [props.ViewContent] - 自定义触发器视图的函数，接收 { showModal } 作为参数。优先级高于 isBtn 和 name。
 */
const ExtensionCommon = ({
                             id,                // 用于匹配 EXTENSION_ITEMS 或 STATISTICS_ITEM
                             extension,         // 如果未过期，可直接渲染的内容 (在此次侧边栏优化中，这个prop不主要用)
                             routerPath,        // 目标路由 (如果未过期且符合条件)
                             history,           // history 对象
                             name,              // 功能名称，用于弹窗标题
                             isBtn,             // 是否显示为按钮 (当ViewContent未提供时)
                             ViewContent        // 自定义触发UI，会接收一个 showModal 函数作为prop
                         }) => {
    const [isModalOpen, setIsModalOpen] = useState(false); // 控制弹窗的显示状态

    // 根据传入的 id 筛选出对应的扩展项信息，用于弹窗内容展示
    // 使用 useMemo 缓存计算结果，避免不必要的重算
    const filteredItems = useMemo(() => {
        if (id === "/workspace/statistics/trend" || id === "/workspace/statistics/status" || id === "/workspace/statistics/contribution") {
            // 如果是统计相关的，先筛选主ID，再决定是否需要整个STATISTICS_ITEM列表
            // 例如，如果id是trend，则可以只显示trend，或显示所有统计项让用户切换
            // 当前逻辑是如果匹配到统计类，则展示所有统计项
            // 为了在弹窗中能切换，需要将id拆解，如 /workspace/statistics/trend -> trend
            const statsSubId = id.split('/').pop();
            const matchedStat = STATISTICS_ITEM.find(item => item.id === statsSubId);
            return matchedStat ? STATISTICS_ITEM : []; // 如果匹配到，则用整个列表，否则空
        }
        const item = EXTENSION_ITEMS.find(item => item.id === id);
        return item ? [item] : []; // 其他情况，精确匹配一个
    }, [id]);

    // 设置弹窗中默认或当前活动（鼠标悬浮）的展示项
    const [active, setActive] = useState(filteredItems.length ? filteredItems[0] : {});

    // useEffect(() => { // 当 filteredItems 变化时，重置 active 项
    //     setActive(filteredItems.length ? filteredItems[0] : {});
    // }, [filteredItems]);
    // 上面这个useEffect会导致在统计类的弹窗中切换active项后，如果filteredItems不变（通常不变），active项不会持久化用户选择。
    // 如果希望弹窗内切换后保持，则初始化时设置一次即可。如果希望每次弹窗重置，则保留此useEffect。
    // 考虑到用户体验，通常初始化一次即可。


    const showModal = () => setIsModalOpen(true);    // 打开弹窗
    const handleCancel = () => setIsModalOpen(false); // 关闭弹窗

    /**
     * 渲染插件（扩展功能）的视图
     *
     * versionInfo 格式示例:
     * {
     * "release": 1, // 1:ce, 2:ee, 3:saas
     * "expired": true // true(已过期), false(未过期)
     * }
     */
    const renderPluginView = () => {
        const currentVersionInfo = getVersionInfo(); // 获取当前最新的版本信息

        // 条件1: 版本未过期 且 (定义了 extension prop 或者 history prop)
        // 这个条件主要用于非侧边栏场景，或者侧边栏项本身就不是“过期后弹窗”的逻辑
        if (currentVersionInfo.expired === false && (extension || (history && routerPath))) {
            // 特定路由项，如果未过期则直接跳转 (例如，某些设置项可能本身就是EE功能，但未过期时可用)
            // 注意：这个 routerPath 是 ExtensionCommon 的 prop, 不是 menuData 里的 item.router
            let navigableRoutes = ['/setting/logo', '/setting/whitelist', '/workspace/review', "/workspace/statistics/trend"];
            if (routerPath && navigableRoutes.includes(id) && history) { // id 也应该匹配
                history.push(routerPath); // 执行跳转
                return null; // 跳转后不再渲染其他内容
            }

            // 如果定义了 extension prop (通常是自定义的ReactNode)，则直接渲染它
            if (extension) {
                return extension;
            }
            // 如果都不满足，但 expired === false，则意味着这是一个“免费”或“已购买未过期”的功能
            // 此时，ViewContent 应该已经被父组件处理掉了（父组件直接渲染了功能，而不是 ExtensionCommon）
            // 所以，如果代码能执行到这里且 ViewContent 存在，说明父组件逻辑可能需要调整
            // 按当前 LeftMenuCommon 的逻辑，当 !expired 时，不会走到 ExtensionCommon，所以这里是安全的
        }

        // 条件2: 版本已过期，或者上述条件不满足（需要显示购买提示的场景）
        // 定义触发弹窗的UI元素
        const triggerElement = () => {
            if (ViewContent) {
                // 如果父组件通过 ViewContent 提供了自定义UI，则使用它
                // ViewContent 是一个函数，它接收 showModal 作为参数
                return ViewContent({ showModal });
            }
            // 否则，根据 isBtn prop 决定使用默认按钮还是文字链接
            if (isBtn) {
                return <ShowBtnView name={name} showModal={showModal} />;
            } else {
                return <ShowTxtView name={name} showModal={showModal} />;
            }
        };

        return (
            <>
                {triggerElement()} {/* 渲染触发器 */}

                <Modal
                    open={isModalOpen}
                    onCancel={handleCancel}
                    closable={true}
                    footer={null} // 不显示默认底部按钮
                    width={800}
                    className="extension-enhance-modal" // 自定义样式类名
                >
                    <div className="enhance-free">
                        <div className="enhance-free-introduce">
                            {/* 弹窗标题优先使用传入的 name，其次是 active 项的 title */}
                            <div className="enhance-title">{name || active?.title || "高级功能"}</div>
                            <div className="enhance-title-desc">付费版本专属功能</div>
                            <div className="enhance-desc">
                                {filteredItems.map((item, index) => (
                                    <Fragment key={item.id || index}>
                                        {item.title}
                                        {index !== filteredItems.length - 1 && '，'}
                                    </Fragment>
                                ))}
                                {filteredItems.length === 0 && "此功能需要升级版本以获取更佳体验。"}
                            </div>
                            <div className="enhance-desc-box">
                                {filteredItems.map(item => (
                                    <div
                                        className={`enhance-desc-item ${item.id === active?.id ? 'enhance-desc-active-item' : ''}`}
                                        onClick={() => setActive(item)}      // 点击设为活动项
                                        onMouseEnter={() => setActive(item)} // 鼠标悬浮设为活动项
                                        key={item.id}
                                    >
                                        <div><CheckCircleTwoTone /></div>
                                        <div>{item.title}</div>
                                    </div>
                                ))}
                            </div>
                            <div
                                className='enhance-desc-guid'
                                onClick={() => window.open('https://tiklab.net/contactus', '_blank')} // 跳转到咨询页面
                            >
                                咨询购买
                            </div>
                            <div
                                className='enhance-desc-buy'
                                onClick={() => applySubscription("postin")} // 调用购买订阅的函数
                            >
                                立即购买
                            </div>
                        </div>
                        <div className="enhance-free-image">
                            {/* 显示活动项的图标/图片 */}
                            {active?.icon && <img src={active.icon} alt={active.title || ""} width="100%" />}
                        </div>
                    </div>
                </Modal>
            </>
        );
    };

    return renderPluginView(); // 执行渲染逻辑
};

export default ExtensionCommon;